<template>
  <div id="home">
    <navbar class="home_nav">
      <template v-slot:center>
        <div>购物街</div>
      </template>
    </navbar>
    <!-- ref="scrollll"的意思是把scroll标签命名为scrollll，方便下面访问子组件的数据 -->
    <scroll
      class="scroll1"
      ref="scrollll"
      @positionshow="positionshow"
      @pullingUp1="pullingUp111"
    >
      <homeswiper :banners="banners"></homeswiper>
      <homerecommend :recommends="recommends"></homerecommend>
      <homepopular></homepopular>
      <tarcontrol
        :title="['流行', '新款', '精选']"
        class="fixed"
        @typeclick="typeclick"
      ></tarcontrol>
      <goodslist :goods="goods[datatype].list"> </goodslist>
    </scroll>
    <backtop @click.native="backtop" v-show="isshow"></backtop>
  </div>
</template>
<script>
import navbar from "@/components/common/navbar/navbar";
import homeswiper from "./homechild/homeswiper";
import homerecommend from "./homechild/homerecommend";
import homepopular from "./homechild/homepopular";
import tarcontrol from "@/components/content/tarcontrol";
import goodslist from "@/components/content/goods/goodslist";
import scroll from "@/components/common/scroll/scroll";
import backtop from "@/components/content/backtop/backtop";

import { getHomeMutaidata, getHomeGoods } from "@/network/home";

// import swiper1 from "@/components/common/swiper/swiper1";

export default {
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      datatype: "pop",
      isshow: false,
      saveY: 0,
    };
  },
  components: {
    navbar,
    homeswiper,
    homerecommend,
    homepopular,
    tarcontrol,
    goodslist,
    scroll,
    backtop,
  },
  created() {
    getHomeMutaidata().then((res) => {
      // console.log(res);
      // 把请求过来的数据存入data中
      this.banners = res.data.data.banner.list;
      this.recommends = res.data.data.recommend.list;
    });
    // 这里在methods中包装一个函数。用methods中的方法要加this,实参'pop','new','sell'是后端人员提供的
    this.getHomeGoodsList("pop");
    this.getHomeGoodsList("new");
    this.getHomeGoodsList("sell");
    // getHomeGoods("pop", 1).then((res) => {
    //   console.log(res);
    //   this.goods.pop.list = res.data.data.list;
    // });
  },
  // 这个生命周期 函数，可以代替scroll.vue中的observeImage: true,
  // updated() {
  //   // console.log("111");
  //   this.$refs.scrollll.scroll.refresh();
  // },

  // activated，deactivated这两个路由守卫是来路由缓存的
  activated() {
    this.$refs.scrollll.scroll.refresh();
    // scrollTo第三个参数时间尽量不为0
    this.$refs.scrollll.scroll.scrollTo(0, this.saveY, 1);
  },
  deactivated() {
    this.saveY = this.$refs.scrollll.scroll.getScrollY;
  },
  methods: {
    // 事件监听
    typeclick(index) {
      // switch (index) {
      //   case 0:
      //     this.datatype = "pop";
      //     break;
      //   case 1:
      //     this.datatype = "new";
      //     break;
      //   case 2:
      //     this.datatype = "sell";
      //     break;
      // }
      this.datatype = Object.keys(this.goods)[index];
      // Object.keys(obj) 方法会返回一个由一个给定对象的自身可枚举属性组成的数组(数组中的元素为对象属性字符串形式)，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
    },
    backtop() {
      // console.log(this.$refs.scrollll.scroll.scrollTo);

      // this.$refs.scrollll.scroll.scrollTo是访问scrollll（跟扇面ref对应）中的scroll数据中的scrollTo方法。意思是指定跳到具体的位置（第一个0是x轴为0，第二个0是y轴为0，第三个参数500是500毫秒跳到指定位置）
      this.$refs.scrollll && this.$refs.scrollll.scroll.scrollTo(0, 0, 500);
    },
    positionshow(position) {
      // console.log(position);
      this.isshow = -position.y > 1000;
    },
    pullingUp111() {
      // console.log("上拉加载更多啊啊啊啊啊");
      this.getHomeGoodsList(this.datatype);
    },

    // 网络请求
    getHomeGoodsList(type) {
      // const page=this.goods.type.page+1 这行代码是为了增加这个函数的复用性
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        // console.log(res);
        this.goods[type].list.push(...res.data.data.list);
        // this.goods.pop.list.push(...res.data.data.list);这里的...res.data.data.list的意思是把res.data.data.list数组的 每一项都放入this.goods.pop.list数组中
        this.goods[type].page += 1;
        // this.goods[type].page += 1;这里的goods[type]写法相当于goods.type  但是这里的type是要变化的（根据实参），所以这里不能用goods.type形式
        this.$refs.scrollll && this.$refs.scrollll.scroll.finishPullUp();
        // this.$refs.scrollll.scroll.finishPullUp();这行代码意思是可以多次上拉加载更多
      });
    },
  },
};
</script>
<style>
#home {
  /* 44px是navtar的高度 */
  padding-top: 44px;
  height: 100vh;
  /* height: 100vh;意思是高度与屏幕可见高度一样大 */
  position: relative;
}
/* 1.在这里给组件设置样式，是考虑到这个组件因为其他的地方还要用，则颜色，字体大小，不一样，只给当前使用的组件设置样式 */
.home_nav {
  background-color: pink;
  font-size: 20px;
  color: white;
  position: fixed;
  width: 100%;
  /* width: 100%;相当于left:0; right: 0; */
  top: 0;
  z-index: 1;
  /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！ */
}

/* 粘性定位(相当于relativa,fixed两种的结合)--->这个样式是当这个组件距离top44px时，这个组件就固定在这个位置 */

/* 当把这个组件放入scroll中时 ，这个粘性定位样式就不起效果了，则可以删除 */
/* .fixed {
  position: sticky;
  top: 44px;
} */
.scroll1 {
  /* height: 300px; */
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 50px;
}
</style>